<script setup>
import '@wangeditor/editor/dist/css/style.css'
import { Plus } from '@element-plus/icons-vue';
import { useStyleTag } from '@vueuse/core'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { DomEditor } from '@wangeditor/editor';
import { ref, onMounted, onUnmounted, shallowRef, nextTick } from 'vue'
import { useUserStore } from '@/stores';
useStyleTag(
  `@import 
  url("//at.alicdn.com/t/c/font_4833919_h3wd3db5h9.css");`,
  { id: 'iconfont_css_create_header' })// 唯一 ID 防止重复
// 引入组件
const __name = 'PublishActivity';
defineOptions({
  name: __name
});
const userStore = useUserStore();
const logout = () => {
  // 清除用户信息
  userStore.clearUser();
  // 跳转到登录页，假设登录页路由为 '/login'
  router.push('/login');
};
const user = userStore.user;
const header = ref(null);
const show_slide_header = ref(false);
const handleScroll = () => {
  //   const n = document.documentElement.scrollTop;
  const rect = header.value.getBoundingClientRect();
  // console.log('Bottom:', rect.bottom);
  // show_slide_header.value = n >= main.value.offsetTop ? true : false;
  show_slide_header.value = rect.bottom < 0 ? true : false;
};
// 调用 useUserStore 函数获取 store 实例

onMounted(() => {
  window.addEventListener('scroll', handleScroll);
});
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});
// 头像弹出框
const showAvatarPopover = ref(false)
//消息
const showMessagePopover = ref(false)

const coverImageUrl = ref('https://img0.baidu.com/it/u=2765486918,3196256426&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500')
// coverImageUrl.value = ''
const srcList = ref([
  'https://img0.baidu.com/it/u=2765486918,3196256426&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500',
  'https://img0.baidu.com/it/u=3292526101,1695607968&fm=253&fmt=auto&app=138&f=JPEG?w=888&h=500',
  'https://img0.baidu.com/it/u=981837662,3475465166&fm=253&fmt=auto&app=138&f=JPEG?w=767&h=500'

])
// onClickOutside(asideDrawBox, () => {
const params = ref({

})
const eventName = ref('')
const startTime = ref('')
const endTime = ref('')
const activityLocation = ref('')


// 编辑器实例
const editorRef = shallowRef(null)
const valueHtml = ref('') // 存储编辑器内容
const mode = ref('default');
const toolbarConfig = {
  excludeKeys: ['fullScreen']
}
// 编辑器配置
const editorConfig = {
  placeholder: '请输入活动详情内容...',
  MENU_CONF: {
    uploadImage: {
      server: 'https://hmajax.itheima.net/api/uploadimg', // 根据实际接口修改
      customInsert(res, insertFn) {                  // JS 语法
        // res 即服务端的返回结果
        // 从 res 中找到 url alt href ，然后插入图片
        console.log("res 即服务端的返回结果", res);

        const { url } = res.data;
        const alt = "";
        const href = "";
        insertFn(url, alt, href);
      },

      fieldName: 'img',
      // 设置 base64LimitSize，如果文件小于该大小，则转为 Base64 格式
      base64LimitSize: 5 * 1024,// 5KB

      // 单个文件上传成功之后
      onSuccess(file, res) {          // JS 语法
        console.log("文件类", file);
        console.log(`${file.name} 该文件名上传成功,后面是响应`, res)
      },

      // 单个文件的最大体积限制，默认为 2M
      maxFileSize: 10 * 1024 * 1024, // 1M

      // 最多可上传几个文件，默认为 100
      maxNumberOfFiles: 100,

      // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
      allowedFileTypes: ['image/*'],
      //回调函数-------------------------
      // 单个文件上传失败
      onFailed(file, res) {           // JS 语法
        console.log(`${file.name} 上传失败`, res)
      },

      // 上传错误，或者触发 timeout 超时
      onError(file, err, res) {               // JS 语法
        console.log(`${file.name} 上传出错`, err, res)
      },


    }

  }
}

const toolbar = DomEditor.getToolbar(editorRef.value)

console.log(toolbar);
// const curToolbarConfig = toolbar.getConfig()
const handleCreated = (editor) => {
  editorRef.value = editor;
  // 正确获取工具栏配置的方式
  setTimeout(() => {
    const toolbar = DomEditor.getToolbar(editor);
    if (toolbar) {
      // console.log('所有可用工具栏按键:', editor.getAllMenuKeys());
      console.log('当前工具栏配置:', toolbar.getConfig().toolbarKeys);
    }
  }, 0);

}
// 组件销毁时
onUnmounted(() => {
  const editor = editorRef.value
  if (editor == null) {
    return
  }
  editor.destroy()
})

onMounted(async () => {
  nextTick(() => {
    const setting = editorRef.value.getMenuConfig('uploadImage') // 获取 uploadImage 的当前配置
    console.log(' 打印当前配置', setting); // 打印当前配置 
  })
})
</script>

<template>
  <!-- 顶部l栏 -->
  <div class="bili_header" ref="header">
    <!-- <div :class="['header__bar',
      { 'slide_down': show_slide_header }]"> -->
    <div :class="['header__bar',]">
      <ul class="left_entry">

        <!-- <li class="menu_btn" @click="showAsideDrawBox = true">
          <svg data-v-8630e4e5="" width="18" height="15" viewBox="0 0 18 15" fill="currentColor"
            xmlns="http://www.w3.org/2000/svg" class="btn-aside-draw">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H18V1H0V0ZM0 7H18V8H0V7ZM18 14H0V15H18V14Z"></path>
          </svg>
        </li> -->

        <li class="logo">
          <h1>
            <router-link to="/" target="_blank" rel="noopener noreferrer">毕业生之家GradLink</router-link>
          </h1>
        </li>
        <li class="pub-container top-toolbal">
          <div class="top-toolbar-box">
            <a class="btn-back" href="/activity-manage">
              <i class="el_mcm-icon el-icon">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                  <path fill="currentColor"
                    d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z">
                  </path>
                </svg>

              </i>

            </a>
            <span class="title">发布活动</span>


          </div>
        </li>
        <!-- <li class="create_center" v-show="show_slide_header === false">
          <router-link to="/activity-manage" rel="noopener noreferrer">
            <span>创作中心</span>
          </router-link>
        </li> -->
      </ul>

      <ul class="right_entry">
        <!-- 头像 -->
        <!-- <li class="v-popover-wrap header-avatar-wrap"
             @mouseenter="handleAvatarEnter"
                @mouseleave="handleAvatarLeave"> -->
        <li class="v-popover-wrap header-avatar-wrap" @mouseenter="showAvatarPopover = true"
          @mouseleave="showAvatarPopover = false">

          <div
            :class="{ 'header-avatar-wrap--container': true, 'mini-avatar--small': !showAvatarPopover, 'mini-avatar--large': showAvatarPopover }">

            <router-link class="header-entry-mini" to="/user-center" target="_blank" rel="noopener noreferrer">
              <img :src="user.avatarUrl" alt="">
            </router-link>
            <router-link class="header-entry-avatar" to="/user-center" target="_blank" rel="noopener noreferrer">
              <div class="bili-avatar">
                <img class="bili_avatar_img" :src="user.avatarUrl" alt="">
              </div>
            </router-link>
          </div>
          <div class="v-popover avatar-popover-is-bottom" v-show="showAvatarPopover">
            <!-- <div class="v-popover avatar-popover-is-bottom"
                 @mouseenter="clearCloseTimer"
                @mouseleave="startCloseTimer" 
                    v-show="showAvatarPopover"
                     > -->


            <div class="v-popover-content">
              <div class="avatar-panel-popover">

                <!-- 顶部留出空间给半个大头像占位 -->
                <div class="avatar-top-space"></div>
                <!-- 显示昵称 -->
                <div class="user-nickname">{{ user.nickName }}</div>
                <!-- 导航列表 -->
                <ul class="links-item">
                  <router-link class="single-link-item" to="/user-center" target="_blank" rel="noopener noreferrer">
                    <div class="link-title">
                      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"
                        class="link-icon">
                        <rect opacity="0.01" width="18" height="18" fill="white"></rect>
                        <path
                          d="M12.1146 9.48983C13.2763 8.63331 14.0299 7.2548 14.0299 5.7035C14.0299 3.11005 11.9198 1 9.32636 1C6.73291 1 4.62286 3.11005 4.62286 5.7035C4.62286 7.2548 5.37829 8.63331 6.53808 9.48983C3.87662 10.589 2 13.2118 2 16.2648C2 16.671 2.32901 17 2.73521 17C3.14141 17 3.47042 16.671 3.47042 16.2648C3.47042 13.0335 6.09879 10.407 9.3282 10.407C12.5576 10.407 15.186 13.0354 15.186 16.2648C15.186 16.671 15.515 17 15.9212 17C16.3274 17 16.6564 16.671 16.6564 16.2648C16.6546 13.2118 14.7761 10.589 12.1146 9.48983ZM6.09144 5.7035C6.09144 3.91878 7.54348 2.46858 9.32636 2.46858C11.1092 2.46858 12.5613 3.92062 12.5613 5.7035C12.5613 7.48639 11.1092 8.93843 9.32636 8.93843C7.54348 8.93843 6.09144 7.48639 6.09144 5.7035Z"
                          fill="#61666d"></path>
                      </svg>
                      <span>个人中心</span>
                    </div>
                    <svg width="10" height="10" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg"
                      class="link-icon--right">
                      <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M7.50588 3.40623C7.40825 3.3086 7.24996 3.3086 7.15232 3.40623L4.41244 6.14612L1.67255 3.40623C1.57491 3.3086 1.41662 3.3086 1.31899 3.40623C1.22136 3.50386 1.22136 3.66215 1.31899 3.75978L4.11781 6.5586C4.28053 6.72132 4.54434 6.72132 4.70706 6.5586L7.50588 3.75978C7.60351 3.66215 7.60351 3.50386 7.50588 3.40623Z"
                        fill="currentColor"></path>
                      <path
                        d="M7.15232 3.40623L7.50588 3.75978L7.50588 3.75978L7.15232 3.40623ZM7.50588 3.40623L7.15232 3.75978L7.15233 3.75978L7.50588 3.40623ZM4.41244 6.14612L4.05888 6.49967C4.15265 6.59344 4.27983 6.64612 4.41244 6.64612C4.54504 6.64612 4.67222 6.59344 4.76599 6.49967L4.41244 6.14612ZM1.67255 3.40623L2.0261 3.05268L2.0261 3.05268L1.67255 3.40623ZM1.31899 3.40623L0.965439 3.05268L0.965439 3.05268L1.31899 3.40623ZM1.31899 3.75978L1.67255 3.40623V3.40623L1.31899 3.75978ZM4.11781 6.5586L3.76425 6.91215L4.11781 6.5586ZM4.70706 6.5586L4.35351 6.20505L4.70706 6.5586ZM7.50588 3.75978L7.15233 3.40623L7.15232 3.40623L7.50588 3.75978ZM7.50588 3.75978C7.40825 3.85742 7.24996 3.85742 7.15232 3.75978L7.85943 3.05268C7.56654 2.75978 7.09166 2.75978 6.79877 3.05268L7.50588 3.75978ZM4.76599 6.49967L7.50588 3.75978L6.79877 3.05268L4.05888 5.79257L4.76599 6.49967ZM1.31899 3.75978L4.05888 6.49967L4.76599 5.79257L2.0261 3.05268L1.31899 3.75978ZM1.67254 3.75979C1.57491 3.85742 1.41662 3.85742 1.31899 3.75979L2.0261 3.05268C1.73321 2.75978 1.25833 2.75978 0.965439 3.05268L1.67254 3.75979ZM1.67255 3.40623C1.77018 3.50386 1.77018 3.66215 1.67255 3.75978L0.965439 3.05268C0.672546 3.34557 0.672546 3.82044 0.965439 4.11334L1.67255 3.40623ZM4.47136 6.20505L1.67255 3.40623L0.965439 4.11334L3.76425 6.91215L4.47136 6.20505ZM4.35351 6.20505C4.38605 6.1725 4.43882 6.1725 4.47136 6.20505L3.76425 6.91215C4.12223 7.27013 4.70264 7.27013 5.06062 6.91215L4.35351 6.20505ZM7.15232 3.40623L4.35351 6.20505L5.06062 6.91215L7.85943 4.11334L7.15232 3.40623ZM7.15233 3.75978C7.05469 3.66215 7.05469 3.50386 7.15233 3.40623L7.85943 4.11334C8.15233 3.82045 8.15233 3.34557 7.85943 3.05268L7.15233 3.75978Z"
                        fill="currentColor"></path>
                    </svg>
                  </router-link>
                  <router-link class="single-link-item" to="/activity-manage" target="_blank" rel="noopener noreferrer">
                    <div class="link-title">

                      <i class="iconfont icon-huodong_huodongguanli link-icon"></i>
                      <span>活动管理</span>
                    </div>
                    <svg width="10" height="10" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg"
                      class="link-icon--right">
                      <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M7.50588 3.40623C7.40825 3.3086 7.24996 3.3086 7.15232 3.40623L4.41244 6.14612L1.67255 3.40623C1.57491 3.3086 1.41662 3.3086 1.31899 3.40623C1.22136 3.50386 1.22136 3.66215 1.31899 3.75978L4.11781 6.5586C4.28053 6.72132 4.54434 6.72132 4.70706 6.5586L7.50588 3.75978C7.60351 3.66215 7.60351 3.50386 7.50588 3.40623Z"
                        fill="currentColor"></path>
                      <path
                        d="M7.15232 3.40623L7.50588 3.75978L7.50588 3.75978L7.15232 3.40623ZM7.50588 3.40623L7.15232 3.75978L7.15233 3.75978L7.50588 3.40623ZM4.41244 6.14612L4.05888 6.49967C4.15265 6.59344 4.27983 6.64612 4.41244 6.64612C4.54504 6.64612 4.67222 6.59344 4.76599 6.49967L4.41244 6.14612ZM1.67255 3.40623L2.0261 3.05268L2.0261 3.05268L1.67255 3.40623ZM1.31899 3.40623L0.965439 3.05268L0.965439 3.05268L1.31899 3.40623ZM1.31899 3.75978L1.67255 3.40623V3.40623L1.31899 3.75978ZM4.11781 6.5586L3.76425 6.91215L4.11781 6.5586ZM4.70706 6.5586L4.35351 6.20505L4.70706 6.5586ZM7.50588 3.75978L7.15233 3.40623L7.15232 3.40623L7.50588 3.75978ZM7.50588 3.75978C7.40825 3.85742 7.24996 3.85742 7.15232 3.75978L7.85943 3.05268C7.56654 2.75978 7.09166 2.75978 6.79877 3.05268L7.50588 3.75978ZM4.76599 6.49967L7.50588 3.75978L6.79877 3.05268L4.05888 5.79257L4.76599 6.49967ZM1.31899 3.75978L4.05888 6.49967L4.76599 5.79257L2.0261 3.05268L1.31899 3.75978ZM1.67254 3.75979C1.57491 3.85742 1.41662 3.85742 1.31899 3.75979L2.0261 3.05268C1.73321 2.75978 1.25833 2.75978 0.965439 3.05268L1.67254 3.75979ZM1.67255 3.40623C1.77018 3.50386 1.77018 3.66215 1.67255 3.75978L0.965439 3.05268C0.672546 3.34557 0.672546 3.82044 0.965439 4.11334L1.67255 3.40623ZM4.47136 6.20505L1.67255 3.40623L0.965439 4.11334L3.76425 6.91215L4.47136 6.20505ZM4.35351 6.20505C4.38605 6.1725 4.43882 6.1725 4.47136 6.20505L3.76425 6.91215C4.12223 7.27013 4.70264 7.27013 5.06062 6.91215L4.35351 6.20505ZM7.15232 3.40623L4.35351 6.20505L5.06062 6.91215L7.85943 4.11334L7.15232 3.40623ZM7.15233 3.75978C7.05469 3.66215 7.05469 3.50386 7.15233 3.40623L7.85943 4.11334C8.15233 3.82045 8.15233 3.34557 7.85943 3.05268L7.15233 3.75978Z"
                        fill="currentColor"></path>
                    </svg>
                  </router-link>
                  <router-link class="single-link-item" to="/activity-manage/my-registrations" target="_blank"
                    rel="noopener noreferrer">
                    <div class="link-title">

                      <i class="iconfont icon-wodebaoming1 link-icon"></i>
                      <span>我的报名</span>
                    </div>
                    <svg width="10" height="10" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg"
                      class="link-icon--right">
                      <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M7.50588 3.40623C7.40825 3.3086 7.24996 3.3086 7.15232 3.40623L4.41244 6.14612L1.67255 3.40623C1.57491 3.3086 1.41662 3.3086 1.31899 3.40623C1.22136 3.50386 1.22136 3.66215 1.31899 3.75978L4.11781 6.5586C4.28053 6.72132 4.54434 6.72132 4.70706 6.5586L7.50588 3.75978C7.60351 3.66215 7.60351 3.50386 7.50588 3.40623Z"
                        fill="currentColor"></path>
                      <path
                        d="M7.15232 3.40623L7.50588 3.75978L7.50588 3.75978L7.15232 3.40623ZM7.50588 3.40623L7.15232 3.75978L7.15233 3.75978L7.50588 3.40623ZM4.41244 6.14612L4.05888 6.49967C4.15265 6.59344 4.27983 6.64612 4.41244 6.64612C4.54504 6.64612 4.67222 6.59344 4.76599 6.49967L4.41244 6.14612ZM1.67255 3.40623L2.0261 3.05268L2.0261 3.05268L1.67255 3.40623ZM1.31899 3.40623L0.965439 3.05268L0.965439 3.05268L1.31899 3.40623ZM1.31899 3.75978L1.67255 3.40623V3.40623L1.31899 3.75978ZM4.11781 6.5586L3.76425 6.91215L4.11781 6.5586ZM4.70706 6.5586L4.35351 6.20505L4.70706 6.5586ZM7.50588 3.75978L7.15233 3.40623L7.15232 3.40623L7.50588 3.75978ZM7.50588 3.75978C7.40825 3.85742 7.24996 3.85742 7.15232 3.75978L7.85943 3.05268C7.56654 2.75978 7.09166 2.75978 6.79877 3.05268L7.50588 3.75978ZM4.76599 6.49967L7.50588 3.75978L6.79877 3.05268L4.05888 5.79257L4.76599 6.49967ZM1.31899 3.75978L4.05888 6.49967L4.76599 5.79257L2.0261 3.05268L1.31899 3.75978ZM1.67254 3.75979C1.57491 3.85742 1.41662 3.85742 1.31899 3.75979L2.0261 3.05268C1.73321 2.75978 1.25833 2.75978 0.965439 3.05268L1.67254 3.75979ZM1.67255 3.40623C1.77018 3.50386 1.77018 3.66215 1.67255 3.75978L0.965439 3.05268C0.672546 3.34557 0.672546 3.82044 0.965439 4.11334L1.67255 3.40623ZM4.47136 6.20505L1.67255 3.40623L0.965439 4.11334L3.76425 6.91215L4.47136 6.20505ZM4.35351 6.20505C4.38605 6.1725 4.43882 6.1725 4.47136 6.20505L3.76425 6.91215C4.12223 7.27013 4.70264 7.27013 5.06062 6.91215L4.35351 6.20505ZM7.15232 3.40623L4.35351 6.20505L5.06062 6.91215L7.85943 4.11334L7.15232 3.40623ZM7.15233 3.75978C7.05469 3.66215 7.05469 3.50386 7.15233 3.40623L7.85943 4.11334C8.15233 3.82045 8.15233 3.34557 7.85943 3.05268L7.15233 3.75978Z"
                        fill="currentColor"></path>
                    </svg>
                  </router-link>
                  <div class="split-line"></div>
                  <div class="logout-item" @click.prevent="logout">
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"
                      class="link-icon">
                      <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M17.6137 9.30115C17.6932 9.10837 17.6932 8.89282 17.6137 8.70004C17.5743 8.60393 17.5165 8.51726 17.4443 8.44504L15.2221 6.22282C14.9148 5.9156 14.4176 5.91615 14.111 6.22282C13.8043 6.52948 13.8037 7.02671 14.111 7.33393L14.9921 8.21504L7.99985 8.21504C7.56596 8.21448 7.21429 8.56615 7.21429 9.00059C7.21429 9.21726 7.30207 9.41393 7.44429 9.55615C7.58651 9.69837 7.78318 9.78615 7.99985 9.78615L14.9921 9.78615L14.111 10.6673C13.8043 10.9739 13.8037 11.4712 14.111 11.7784C14.4182 12.0856 14.9154 12.085 15.2221 11.7784L17.4443 9.55615C17.5165 9.48393 17.5743 9.39726 17.6137 9.30115"
                        fill="#61666d">
                      </path>
                      <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M11.8889 5.11111C9.74127 2.96349 6.25873 2.96349 4.11111 5.11111C1.96349 7.25873 1.96349 10.7413 4.11111 12.8889C6.25873 15.0365 9.74127 15.0365 11.8889 12.8889C12.1957 12.5821 12.6932 12.5821 13 12.8889C13.3068 13.1957 13.3068 13.6932 13 14C10.2387 16.7613 5.76127 16.7613 3 14C0.238731 11.2387 0.23873 6.76127 3 4C5.76127 1.23873 10.2387 1.23873 13 4C13.3068 4.30683 13.3068 4.80429 13 5.11111C12.6932 5.41794 12.1957 5.41794 11.8889 5.11111Z"
                        fill="#61666d">
                      </path>
                    </svg>
                    <span>退出登录</span>
                  </div>
                </ul>
              </div>

            </div>
          </div>
        </li>
        <!-- 消息 -->
        <li class="v-popover-wrap 
            right-entry--message 
            right-entry__outside" @mouseenter="showMessagePopover = true" @mouseleave="showMessagePopover = false">
          <div class="red-num--message">2</div>
          <router-link to="/message-center/replies" target="_blank" class="right-entry__outside">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"
              class="right-entry-icon">
              <path
                d="M15.435 17.7717H4.567C2.60143 17.7717 1 16.1723 1 14.2047V5.76702C1 3.80144 2.59942 2.20001 4.567 2.20001H15.433C17.3986 2.20001 19 3.79943 19 5.76702V14.2047C19.002 16.1703 17.4006 17.7717 15.435 17.7717ZM4.567 4.00062C3.59327 4.00062 2.8006 4.79328 2.8006 5.76702V14.2047C2.8006 15.1784 3.59327 15.9711 4.567 15.9711H15.433C16.4067 15.9711 17.1994 15.1784 17.1994 14.2047V5.76702C17.1994 4.79328 16.4067 4.00062 15.433 4.00062H4.567Z"
                fill="currentColor"></path>
              <path
                d="M9.99943 11.2C9.51188 11.2 9.02238 11.0667 8.59748 10.8019L8.5407 10.7635L4.3329 7.65675C3.95304 7.37731 3.88842 6.86226 4.18996 6.50976C4.48954 6.15544 5.0417 6.09699 5.4196 6.37643L9.59412 9.45943C9.84279 9.60189 10.1561 9.60189 10.4067 9.45943L14.5812 6.37643C14.9591 6.09699 15.5113 6.15544 15.8109 6.50976C16.1104 6.86409 16.0478 7.37731 15.6679 7.65675L11.4014 10.8019C10.9765 11.0667 10.487 11.2 9.99943 11.2Z"
                fill="currentColor"></path>
            </svg>
            <span class="right-entry-text">消息</span>
          </router-link>
          <div class="v-popover 
                message-popover-is-bottom" v-show="showMessagePopover">
            <div class="v-popover-content">
              <div class="message-entry-popover">
                <div class="message-inner-list">
                  <a class="message-inner-list__item" href="/message-center/replies" target="_blank">回复我的
                    <span class="message-inner-list__item--num">2</span>
                  </a>
                  <a class="message-inner-list__item" href="/message-center/likes" target="_blank">收到的赞
                    <span class="message-inner-list__item--num">2</span>
                  </a>
                </div>
              </div>
            </div>
          </div>

        </li>



      </ul>

    </div>

  </div>

  <div class="editor_toolbar_container">
    <Toolbar :class="['editor-toolbar', { 'slide_down': show_slide_header }]" :editor="editorRef"
      :defaultConfig="toolbarConfig" :mode="mode" />
  </div>

  <div class="editor-container">
    <!-- 主要内容区域 -->
    <div class="main-content">

      <div class="content-container">
        <!-- 标题输入 -->
        <!-- <input type="text" class="title-input" placeholder="请输入活动标题（最多100字）" maxlength="100"> -->
        <div class="el_mcm-form-item__content" style="margin-left: 0px;"><!---->
          <div class="pos-box">
            <pre class="input__title_pre">【无标题】</pre>
            <div class="el_mcm-textarea input__title">
              <textarea v-model.trim="eventName" class="el_mcm-textarea__inner" maxlength="100" tabindex="0"
                autocomplete="off" placeholder="请输入文章标题（5～100个字）" rows="2" style="min-height: 32px;resize: none;"
                id="txtTitle">
                </textarea>
            </div>
            <span class="title-chk" v-if="eventName.length <= 4">还需输入<span class="need-more">{{ 5 - eventName.length
                }}</span>个字
            </span>
            <span class="title-chk" v-else><span class="title-num">{{ eventName.length }}</span> / 100 </span>
          </div>
        </div>
        <!-- <div class="divider"></div> -->

        <!-- 富文本编辑器 -->
        <!-- <div class="editor-content" id="editor-container"></div> -->
        <!-- 编辑器 -->
        <Editor v-model="valueHtml" :defaultConfig="editorConfig" class="editor-content" :mode="mode"
          @onCreated="handleCreated" />

        <!-- <!~~ 附加信息 ~~>
        <div class="additional-info">
          <div class="form-item  cover">
            <label class="text">添加封面</label>
            <el-upload action="/upload" class="cover-upload" :show-file-list="false">
              <template #trigger>
                <div class="upload-area">
                  <div v-if="!coverImageUrl" class="upload-placeholder">
                    <el-icon :size="30">
                      <Plus />
                    </el-icon>
                    <span class="upload-text">从本地上传</span>
                  </div>
                  <img v-else :src="coverImageUrl" class="cover-preview" />
                </div>
              </template>
</el-upload>
</div>
<div class="form-item summary">
  <label class="text">文章摘要</label>
  <el-input type="textarea" :rows="3" placeholder="请输入活动简介（最多200字）" maxlength="200" />
</div>
<div class="form-item time">
  <label class="text">活动时间</label>
  <div class="time-picker">

    <el-date-picker v-model="startTime" type="datetime" placeholder="开始时间" format="YYYY-MM-DD HH:mm"
      value-format="YYYY-MM-DDTHH:mm:ss" />
    <span class="time-separator">至</span>
    <el-date-picker v-model="endTime" type="datetime" placeholder="结束时间" format="YYYY-MM-DD HH:mm"
      value-format="YYYY-MM-DDTHH:mm:ss" />
  </div>

</div>
<div class="form-item location">
  <label class="text">活动地点</label>
  <div class="location-input">
    <el-input v-model.trim="activityLocation" placeholder="请输入详细地址" />
  </div>
</div>
</div>-->
      </div>

      <div class="footer_container">
        <!-- 附加信息 -->
        <div class="additional-info">
          <div class="form-item  cover">
            <label class="text">添加封面</label>
            <div class="right">
              <el-upload action="/upload" class="preview_box" :show-file-list="false">
                <template #trigger>
                  <div class="upload-area">
                    <div v-if="!coverImageUrl" class="upload-placeholder">
                      <el-icon :size="30">
                        <Plus />
                      </el-icon>
                      <span class="upload-text">从本地上传</span>
                    </div>
                    <img v-else :src="coverImageUrl" class="cover-preview" />
                  </div>
                </template>
              </el-upload>
              <div class="img-selection-box">
                <div class="img-selection-list">
                  <!-- <p class="no-data">暂无内容图片，请在正文中添加图片</p> -->
                  <div class="img-selection-item">
                    <el-image :src="coverImageUrl" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
                      :preview-teleported="true"
                       :preview-src-list="srcList" show-progress :initial-index="4"
                      fit="cover" />
                  </div>
                </div>
              </div>
            </div>

          </div>
          <div class="form-item summary">
            <label class="text">文章摘要</label>
            <el-input type="textarea" :rows="3" placeholder="请输入活动简介（最多256字）" maxlength="256" />
          </div>
          <div class="form-item time">
            <label class="text">活动时间</label>
            <div class="time-picker">

              <el-date-picker v-model="startTime" type="datetime" placeholder="开始时间" format="YYYY-MM-DD HH:mm"
                value-format="YYYY-MM-DDTHH:mm:ss" />
              <span class="time-separator">至</span>
              <el-date-picker v-model="endTime" type="datetime" placeholder="结束时间" format="YYYY-MM-DD HH:mm"
                value-format="YYYY-MM-DDTHH:mm:ss" />
            </div>

          </div>
          <div class="form-item location">
            <label class="text">活动地点</label>
            <div class="location-input">
              <el-input v-model.trim="activityLocation" placeholder="请输入详细地址" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部固定栏 -->
    <div class="editor-footer">
      <div class="footer_content">
        <div class="left">
          <span class="word_count">共500字</span>
          <button aria-disabled="false" type="button" class="el_mcm-button el_mcm-button--default is-link btn-position">
            <span class=""> 回到顶部
              <i class="el_mcm-icon">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                  <path fill="currentColor"
                    d="m488.832 344.32-339.84 356.672a32 32 0 0 0 0 44.16l.384.384a29.44 29.44 0 0 0 42.688 0l320-335.872 319.872 335.872a29.44 29.44 0 0 0 42.688 0l.384-.384a32 32 0 0 0 0-44.16L535.168 344.32a32 32 0 0 0-46.336 0">
                  </path>
                </svg>
              </i>
            </span>
          </button>

        </div>
        <div class="right">
          <el-button size="large">保存草稿</el-button>
          <el-button type="primary" size="large">立即发布</el-button>
        </div>
      </div>
    </div>
  </div>


</template>
<style lang="scss" >
/* 调整预览图片大小（保持比例） */
.el-image-viewer__img{
  width: 60% !important;  /* 按需调整百分比 */
  height: auto !important;
}
</style>
<style lang="scss" scoped>
// .appMain {
//   padding-top: 64px;
//   background-color: #f5f6f7;

//   overflow: hidden;

//   .content_wrap {}

// }

.editor_toolbar_container {
  min-height: 41px;
  background-color: #fff;

  .editor-toolbar {
    // position: fixed;
    // top: 64px;
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    z-index: 100;



    :deep(.w-e-toolbar) {
      justify-content: center;
    }
  }
}

.editor_toolbar_container .slide_down {
  position: fixed;
  top: 0;
  background-color: #fff;
  box-shadow: inset 0 -1px 0 #e3e5e7 !important;
  transition: transform 0.3s ease; // 使用transform实现更流畅的动画
  animation: slideDown 0.3s forwards; // 添加下滑动画
}



// 在样式部分添加
.editor-container {

  .main-content {
    padding: 2.3% 0 100px;
    min-height: 100vh;

    .content-container {
      width: 816px;
      margin: 0 auto;
      background: #fff;
      border-radius: 8px;
      padding: 24px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

      /* .title-input {
        width: 100%;
        border: none;
        font-size: 24px;
        padding: 12px 0;

        &:focus {
          outline: none;
        }
      } */

      .el_mcm-textarea__inner {
        position: relative;
        display: block;
        resize: vertical;
        padding: 5px 11px;
        line-height: 1.5;
        box-sizing: border-box;
        width: 100%;
        font-size: inherit;
        font-family: inherit;
        color: #606266;
        background-color: #fff;
        background-image: none;
        -webkit-appearance: none;
        box-shadow: 0 0 0 1px #dcdfe6 inset;
        border-radius: 4px;
        transition: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
        border: none;

        &:focus {
          outline: none;
          box-shadow: 0 0 0 1px #409eff inset;
        }

      }

      .el_mcm-form-item__content {
        display: flex;
        flex-wrap: wrap;
        // height: 85px;
        margin-left: 0;
        align-items: center;
        flex: 1;
        line-height: 32px;
        position: relative;
        font-size: 14px;
        min-width: 0;

        .pos-box {
          position: relative;
          flex: 1;
          // height: 100%;

          .input__title_pre,
          #txtTitle {
            min-height: 36px;
            line-height: 32px;
            font-size: 23px;
            font-weight: 600;
            word-break: break-all;
            white-space: pre-wrap;
          }

          .input__title_pre {
            visibility: hidden;
            padding-right: 48px;
            padding-bottom: 20px;
            box-sizing: content-box;
          }

          .el_mcm-textarea {
            position: relative;
            display: inline-block;
            width: 100%;
            vertical-align: bottom;
            font-size: 14px;
          }

          .input__title {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            padding: 0 48px 0 0;
            overflow: hidden;
            border: none;
            border-bottom: 1px solid #e8e7e8;

            #txtTitle {


              position: absolute;
              top: 0;
              left: 0;
              height: 100%;
              padding: 0 48px 0 0;
              overflow: hidden;
              border: none;
              box-shadow: none;
            }
          }

          .title-chk {
            position: absolute;
            right: 0;
            top: 0;
            font-size: 12px;
          }




        }
      }


      .divider {
        border-bottom: 1px solid #e5e5e5;
        margin: 16px 0;
      }

      // 调整编辑器样式
      .editor-content {
        border-radius: 4px;
        min-height: 500px; // 最小高度
        display: flex;
        flex-direction: column;

        // 工具栏样式
        .w-e-toolbar {
          border-bottom: 1px solid #e5e5e5 !important;
          background-color: #fff !important;
          flex-shrink: 0; // 防止工具栏压缩
        }

        // 编辑区样式
        :deep(.w-e-text-container) {
          flex: 1; // 填充剩余空间
          min-height: 500px !important; // 确保编辑区最小高度
          overflow-y: auto; // 添加滚动条

          .w-e-scroll {
            min-height: 500px;
          }
        }
      }


    }

    .footer_container {
      width: 816px;
      margin: 24px auto 0;
      background: #fff;
      border-radius: 8px;
      padding: 24px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

      .additional-info {
        margin-top: 24px;

        .form-item {
          margin-bottom: 24px;
          display: flex;
          align-items: center;

        }

        .cover {
          .text {
            margin-right: 18px;
            align-self: flex-start; // 顶部对齐标签
            line-height: 32px;
          }

          .right {
            flex: 1;
            display: flex;
            // align-items: center;

            .preview_box {
              width: 160px;
              height: 90px;
              border: 2px dashed #dcdfe6;
              border-radius: 8px;
              cursor: pointer;
              transition: border-color 0.3s;

              :deep(.el-upload) {
                width: 100%;
                height: 100%;

              }

              &:hover {
                border-color: #409eff;
              }

              .upload-area {
                position: relative;
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;

                .upload-placeholder {

                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  // gap: 10px;
                  justify-content: center;
                  color: #8c939d;
                }

                .upload-text {
                  display: block;
                  margin-top: 8px;
                  font-size: 18px;
                }

                .cover-preview {
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  border-radius: 6px;
                }
              }
            }

            .img-selection-box:has(.no-data) {
              border-radius: 8px;
              background-color: #f2f2f2;
            }

            .img-selection-box {
              // min-height: 160px;

              margin-left: 16px;
              flex: 1;
              display: flex;
              align-items: center;
              overflow: hidden;

              .img-selection-list {
                flex: 1;
                display: flex;
                overflow: hidden;
                flex-wrap: nowrap;

                .no-data {
                  text-align: center;
                  width: 100%;
                  line-height: 49px;
                  color: #555666;
                  font-size: 12px;
                }

                .img-selection-item {
                  position: relative;
                  margin: 0 8px;
                  border-radius: 4px;
                  overflow: hidden;
                  cursor: pointer;
                  width: 80px;
                  height: 45px;
                  flex-shrink: 0;
                  border: 1px solid rgba(0, 0, 0, .1);


                }
              }
            }

          }

        }

        .summary {
          .text {
            width: 90px;
          }
        }

        .time {
          .text {
            width: 81px;
          }

          display: flex;

          .time-picker {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 8px;
          }


        }

        .location {
          display: flex;


          .text {
            width: 81px;
          }

          .location-input {
            flex: 0.6;
          }
        }
      }
    }

  }

  .editor-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: #fff;
    border-top: 1px solid #e5e5e5;
    display: flex;
    align-items: center;

    .footer_content {
      width: 880px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 16px;

      .left {
        display: flex;
        align-items: center;

        .word_count {
          margin-right: 8px;
          color: #1a1a1a;
        }

        button {
          outline: none;
          cursor: pointer;
        }

        .el_mcm-button {
          display: inline-flex;
          justify-content: center;
          align-items: center;
          line-height: 1;
          white-space: nowrap;
          text-align: center;
          user-select: none;
          vertical-align: middle;
          -webkit-appearance: none;
          border: 1px solid #dedfe6;


          padding: 8px 15px;
          font-size: 14px;
          border-radius: 4px;


          &>span {
            display: inline-flex;
            align-items: center;
            color: #1a1a1a;
            font-size: 16px;
          }
        }

        .el_mcm-button.is-link {
          border-color: transparent;
          color: #606266;
          background: transparent;
          padding: 2px;
          height: auto;
        }

        .btn-position {
          font-size: 16px;
          color: #1a1a1a;
          font-weight: 600;
        }

        .el_mcm-button [class*=el_mcm-icon] svg {
          vertical-align: bottom;
        }

        .el_mcm-icon svg {
          height: 1em;
          width: 1em;
        }

        .el_mcm-icon {
          --color: inherit;
          height: 1em;
          width: 1em;
          line-height: 1em;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          position: relative;
          fill: currentColor;
          color: inherit;
          font-size: inherit;
        }

      }
    }
  }
}



@keyframes jump {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes slideDown {
  0% {
    top: -64px;
  }

  100% {
    top: 0;
  }

}

@media (max-width: 1279.9px) {
  .right-entry__outside .right-entry-text {
    display: none;
  }

  .bili_header .header__bar .right-entry-item--upload .header-upload-entry {
    width: 34px;

    .header-upload-entry__icon {
      margin-right: 0px;

    }

    .header-upload-entry__text {
      display: none;
    }
  }
}

@media only screen and (max-width: 1439px) {
  .bili_header .header__bar .left_entry .menu_btn .btn-aside-draw {
    display: block !important;
  }
}

.bili_header {
  background-color: #fff;
  min-height: 64px;
  position: relative;
  margin: 0 auto;
  max-width: 2560px;
  width: 100%;

  .header__bar {
    position: absolute;
    top: 0;
    z-index: 1002;
    display: flex;
    background-color: #fff;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    max-width: 2560px;
    width: 100%;
    height: 64px;
    box-shadow: inset 0 -1px 0 #e3e5e7 !important;

    .left_entry {
      flex: 1;
      display: flex;
      align-items: center;


      /* .menu_btn {
        .btn-aside-draw {
          display: none;
          margin-right: 16px;
          width: 18px;
          height: auto;
          cursor: pointer;
        }
      } */

      .logo {
        width: 100px;

        a {
          height: 64px;
          display: block;
          font-size: 0;
          margin-right: 10px;
          background-image: url(../../assets/new11.png);
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
        }
      }

      .top-toolbar-box {
        height: 48px;
        padding: 11px 0 12px;
        cursor: pointer;
        display: flex;
        align-items: center;

        .btn-back {
          background: transparent;
          border: none;
          font-size: 24px;
          line-height: 25px;
          cursor: pointer;

          .el_mcm-icon {
            --color: inherit;
            height: 1em;
            width: 1em;
            line-height: 1em;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            position: relative;
            fill: currentColor;
            font-size: inherit;

            svg {
              height: 1em;
              width: 1em;
            }

          }


        }

        .el-icon {
          vertical-align: -4px;
          font-size: 24px;
        }

        .title {
          margin-left: 8px;
          margin-right: 8px;
        }
      }

      .create_center {
        display: flex;
        align-items: center;
        margin-right: 10px;
        margin-left: 5px;
        cursor: pointer;

        .icon-shouye {
          margin-right: 6px;
          font-weight: bold;
        }
      }

    }

    .center_search_container {
      margin: 0 10px;
      height: 38px;

      width: 40%;
      flex-shrink: 0;


      .center-search__bar {
        position: relative;
        margin: 0 auto;
        min-width: 181px;
        max-width: 500px;

        &.is-focus {
          box-shadow: 0 0 30px rgba(0, 0, 0, .1);
          border-radius: 8px;
        }

        .nav-searchform {
          border-radius: 8px;
          background-color: #f1f2f3;
          display: flex;
          align-items: center;
          padding: 0 48px 0 4px;
          position: relative;
          z-index: 1;
          overflow: hidden;
          line-height: 38px;
          border: 1px solid #e3e5e7;
          height: 40px;
          opacity: .9;
          transition: background-color .3s;


          /*    &:focus-within {
            border: 1px solid #e3e5e7;
            border-bottom: none;
            background: #fff;
          } */
          &:hover {
            opacity: 1;
            border: 1px solid #e3e5e7;
            background: #fff;
          }

          &.is-focus {
            border: 1px solid #e3e5e7;
            border-bottom: none;
            background: #fff;
            border-radius: 8px 8px 0px 0px;

            .nav-search-content {
              background-color: #e3e5e7;
            }
          }

          .nav-search-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            padding: 0 8px;
            width: 100%;
            height: 32px;
            border: 2px solid transparent;
            border-radius: 6px;

            &:focus {
              background-color: #e3e5e7;
            }

            &:focus-within {
              background-color: #e3e5e7;
            }

            .nav-search-input {
              flex: 1;
              overflow: hidden;
              padding-right: 8px;
              border: none;
              background-color: transparent;
              box-shadow: none;
              color: #61666d;
              font-size: 14px;
              line-height: 20px;


              &:focus {
                outline: none;
                background-color: #e3e5e7;
                color: #000;
              }
            }

            .nav-search-clean {
              width: 16px;
              height: 16px;
              right: 10px;
              cursor: pointer;
              visibility: hidden;

              &:hover svg path {
                fill: #61666d;
              }

              &.has-keyword {
                visibility: inherit;
              }

              svg {
                position: absolute;
                color: #c9ccd0;
              }
            }
          }

          .nav-search-btn {
            position: absolute;
            top: 3px;
            right: 7px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            padding: 0;
            width: 32px;
            height: 32px;
            border: none;
            border-radius: 6px;
            color: #18191c;
            line-height: 32px;
            cursor: pointer;
            transition: background-color .3s;

            &:hover {
              background-color: #e3e5e7;
            }
          }



        }

        .search_panel {
          width: 100%;
          max-height: 612px;
          overflow-y: auto;
          background: #fff;
          border: 1px solid #e3e5e7;
          border-top: none;
          border-radius: 0 0 8px 8px;
          padding: 13px 0 16px;
          -webkit-font-smoothing: antialiased;

          .history {
            .header {
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 0 16px;

              .title {
                height: 24px;
                font-size: 16px;
                line-height: 24px;
                color: #18191c;
                font-family: PingFang SC, HarmonyOS_Medium, Helvetica Neue, Microsoft YaHei, sans-serif;
                font-weight: 600;
              }

              .clear {
                font-size: 12px;
                line-height: 15px;
                height: 15px;
                color: #9499a0;
                cursor: pointer;
              }


            }

            .histories-wrap {
              padding: 0 16px;
              overflow: hidden;
              transition: max-height 0.3s ease;

              .histories {
                display: flex;
                flex-wrap: wrap;
                margin-top: 12px;
                margin-right: -10px;
                margin-bottom: 4px;

                .history-item {
                  position: relative;
                  box-sizing: border-box;
                  height: 30px;
                  padding: 7px 10px 8px;
                  font-size: 12px;
                  line-height: 15px;
                  background: #f6f7f8;
                  border-radius: 4px;
                  margin-right: 10px;
                  margin-bottom: 10px;
                  cursor: pointer;

                  &:hover {
                    outline: none;
                    color: #00aeec;

                    .close {
                      display: block;
                    }
                  }

                  .history-text {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 96px;
                  }

                  .close {
                    display: none;
                    box-sizing: border-box;
                    position: absolute;
                    width: 16px;
                    height: 16px;
                    top: -6px;
                    right: -6px;
                    padding: 2px;

                    svg {
                      width: 14px;
                      height: 14px;
                      fill: #ccc;
                    }
                  }
                }
              }
            }

            .history-fold-wrap {

              display: flex;
              align-items: center;
              justify-content: center;
              width: 64px;
              margin: 0 auto 14px;

              &:hover {
                .fold-text {
                  color: #00aeec;
                }

                .fold-icon {
                  fill: #00aeec;
                }
              }

              .fold-text {
                font-size: 12px;
                line-height: 15px;
                height: 15px;
                color: #9499a0;
                cursor: pointer;
              }

              .fold-icon {
                width: 12px;
                height: 12px;
                fill: #9499a0;
                cursor: pointer;
                transform: rotate(180deg);
                margin-left: 2px;
                transition: transform 0.3s;

                &.fold {
                  transform: rotate(0deg);
                }
              }
            }

          }
        }
      }
    }

    .right_entry {
      flex: 1;
      margin-left: 10px;
      margin-right: 25px;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .right-entry__outside {
        display: flex;
        align-items: center;
        flex-direction: column;
        flex-shrink: 0;
        margin-right: 0;
        min-width: 50px;
        text-align: center;
        font-size: 13px;
        cursor: pointer;

        .right-entry-icon:hover {
          animation: jump .3s;
        }

        .right-entry-text {
          color: #61666d;
        }
      }

      .v-popover-wrap {
        position: relative;

        /* 显示时的状态 */
        &:hover .v-popover {
          opacity: 1;
          transform: translate3d(-50%, 0, 0);
          /* 最终位置 */
        }

        &:hover .v-popover-content {
          transform: translateY(0);
          /* 取消微调 */
        }


        .red-num--message {
          position: absolute;
          top: -6px;
          left: 25px;
          z-index: 1;
          padding: 0 3px;
          min-width: 15px;
          border-radius: 10px;
          background-color: #fa5a57;
          color: #fff;
          font-size: 12px;
          line-height: 15px;
        }
      }

      .v-popover {
        position: absolute;
        top: 100%;
        left: 50%;
        // transition: .3s;
        z-index: 1;
        // transform: translate3d(-50%, 0, 0);

        transform: translate3d(-50%, 10px, 0);
        /* 初始位置下移 10px */
        transition: all 0.3s ease;
        /* 过渡效果 */
        // pointer-events: none;
        /* 防止鼠标事件干扰 */

        .v-popover-content {
          position: relative;
          background-color: #fff;
          box-shadow: 0 0 30px rgba(0, 0, 0, .1);
          border-radius: 8px;
          border: 1px solid #e3e5e7;
          color: #18191c;

          transform: translateY(-5px);
          /* 初始微调 */
          transition: inherit;
          /* 继承父级过渡 */

        }


      }

      .avatar-popover-is-bottom {
        padding-top: 12px;
        margin-left: -12px;

        &:hover {
          // background-color: pink;
        }

      }

      .message-popover-is-bottom {
        padding-top: 15px;
        margin-left: 0px;
      }

      .moment-popover-is-bottom {
        padding-top: 15px;
        margin-left: 0px;
      }


      .header-avatar-wrap {
        position: relative;
        box-sizing: content-box;
        padding-right: 10px;
        width: 50px;
        height: 50px;
        cursor: pointer;

        .header-avatar-wrap--container {
          position: relative;
          z-index: 2;

          .bili-avatar {
            box-sizing: content-box;
            border: 2px solid #fff;
          }

        }

        //小头像
        .header-entry-mini {
          background-color: pink;
          position: absolute;
          top: 5px;
          left: 10px;
          z-index: 2;
          display: block;
          width: 38px;
          height: 38px;
          border-radius: 50%; // 圆形
          animation: fadeOut .3s both;

          img {
            border: 2px solid #fff;
            border-radius: 50%;
            object-fit: inherit;
          }
        }

        //大头像
        .header-entry-avatar {
          position: absolute;
          top: 5px;
          left: 10px;
          z-index: 2;
          display: block;
          border-radius: 50%;
          transform-origin: top left;

        }



        @keyframes fadeIn {
          0% {
            opacity: 0;
          }

          100% {
            opacity: 1;
          }
        }

        @keyframes fadeOut {
          0% {
            opacity: 1;
          }

          100% {
            opacity: 0;
          }
        }

        @keyframes avatarFadeSmall {
          0% {
            transform: scale(1) translate(-36px, 10px);
          }

          60% {
            opacity: 1;
          }

          100% {
            opacity: 0;
            transform: scale(.4) translateY(-2px) translate(3px);
          }
        }

        @keyframes avatarFadeLarge {
          0% {
            opacity: 0;
            transform: scale(.4) translateY(-2px) translate(3px);
          }

          30% {
            opacity: 1;
          }

          100% {
            opacity: 1;
            transform: scale(1) translate(-36px, 10px);
          }
        }

        .mini-avatar--small .header-entry-mini {
          animation: fadeIn .6s both;
        }

        .mini-avatar--small .header-entry-avatar {
          animation: avatarFadeSmall .35s both;
        }

        .mini-avatar--large .header-entry-mini {
          animation: fadeOut .3s both;
        }

        .mini-avatar--large .header-entry-avatar {
          animation: avatarFadeLarge .35s both;
        }


      }




      .avatar-panel-popover {
        padding: 0 24px 18px;
        width: 300px;
        border-radius: 8px;
        background-color: #fff;

        .avatar-top-space {
          height: 35px; // 留出顶部空间
          margin-bottom: 10px;
        }

        .user-nickname {
          text-align: center;
          font-size: 18px;
          font-weight: 550;
          margin-bottom: 10px;
          color: #18191c;
        }

        .links-item {
          list-style: none;
          padding: 0;
          margin: 0;

          .single-link-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 2px;
            padding: 0 14px;
            height: 38px;
            border-radius: 8px;
            color: #61666d;
            font-size: 14px;
            cursor: pointer;
            transition: background-color .3s;
            white-space: nowrap;

            &:hover {
              background-color: #e3e5e7;
            }

            .link-title {
              display: flex;
              align-items: center;


              .link-icon {
                margin-right: 16px;
              }

              .icon-huodong_huodongguanli {
                margin-right: 16px;
                font-size: 19px;
              }

              .icon-wodebaoming1 {
                color: #61666d;
                margin-right: 5px;
                font-size: 29px;
                transform: translateX(-3px);
              }
            }

            .link-icon--right {
              transform: rotate(-90deg);
            }

          }

          .split-line {
            margin: 10px 0;
            width: 100%;
            height: 1px;
            background: #e3e5e7;
          }

          .logout-item {
            display: flex;
            align-items: center;
            padding: 10px 14px;
            border-radius: 8px;
            color: #61666d;
            font-size: 14px;
            cursor: pointer;
            transition: background-color .3s;

            &:hover {
              background-color: #e3e5e7;
            }

            .link-icon {
              margin-right: 16px;
            }
          }

        }


      }
    }



    .right-entry--message {
      position: relative;

      .red-num--message {
        position: absolute;
        top: -6px;
        left: 25px;
        z-index: 1;
        padding: 0 3px;
        min-width: 15px;
        border-radius: 10px;
        background-color: #fa5a57;
        color: #fff;
        font-size: 12px;
        line-height: 15px;
      }

      .message-entry-popover {
        overflow: hidden;
        width: 142px;
        border-radius: 8px;

        .message-inner-list {
          display: flex;
          flex-direction: column;
          padding: 12px 0;

          .message-inner-list__item {
            position: relative;
            display: flex;
            align-items: center;
            padding: 10px 0 10px 27px;
            color: #61666d;
            text-align: left;
            font-size: 14px;
            transition: background-color .3s;

            &:hover {
              background-color: #e3e5e7;
            }

            .message-inner-list__item--num {
              position: absolute;
              right: 17px;
              padding: 0 5px;
              border-radius: 8px;
              background: #fa5a57;
              color: #fff;
              font-size: 12px;
              line-height: 16px;
            }
          }
        }
      }

      .dynamic-panel-popover {
        width: 370px;
      }


    }

    .right-entry-item {
      display: block;
      flex-shrink: 0;
      margin-right: 4px;
      min-width: 50px;
      text-align: center;
      // background-color: pink;

      .right-entry-icon {
        color: #18191c;
      }

      .icon-fabuzhongxin_gongzuotai {
        display: inline-block;
        vertical-align: top;
        margin-bottom: -7px;
        margin-top: -6px;
        font-size: 23px;
      }

      // .publish-text {
      //   color: #61666d;
      // }    


    }

    .right-entry-item--upload {
      margin: 0;
      min-width: 0;

    }

    .header-upload-entry {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 16px;
      width: 90px;
      height: 34px;
      border-radius: 8px;
      background-color: rgba(0, 174, 236);
      color: #fff;
      text-align: center;
      font-size: 14px;
      line-height: 20px;
      cursor: pointer;
      transition: background-color .3s;

      &:hover {
        background-color: rgba(0, 199, 254);
      }

      .header-upload-entry__icon {
        margin-right: 5px;
        color: #fff;
      }

    }
  }

}

.bili-avatar {


  display: block;
  position: relative;
  background-image: url();
  background-size: cover;
  border-radius: 50%;
  margin: 0;
  padding: 0;

  width: 82px;
  height: 82px;
  transform: translate(0px, 0px);

  .bili_avatar_img {
    top: 0;
    left: 0;
    transform: translateZ(0);
    will-change: transform;
    border-radius: 50%;
    border: none;
    display: block;
    object-fit: cover;
    image-rendering: -webkit-optimize-contrast;
    position: absolute;
    width: 100%;
    height: 100%;
  }
}

.bili_header .slide_down {
  position: fixed;
  top: 0;
  background-color: #fff;
  box-shadow: inset 0 -1px 0 #e3e5e7 !important;
  transition: transform 0.3s ease; // 使用transform实现更流畅的动画
  animation: slideDown 0.3s forwards; // 添加下滑动画

}
</style>